* {
  margin: 0;
  padding: 0;
}

#app {
  margin: 50px auto;
  height: 600px;
  width: 1000px;
  border: 1px solid black;
  display: flex;
  padding: 10px;
}

.left {
  height: 100%;
  width: 100px;
  margin-right: 10px;
}

.left .cource-item {
  margin-top: 20px;
}

.cource-item {
  width: 100px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 8px;
}

.right {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.forenoon,
.afternoon {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(5, 1fr);
  flex-grow: 1;
  flex-basis: 0;
  gap: 5px;
  min-height: 0;
}

.forenoon .title,
.afternoon .title {
  grid-area: 1/1/5/2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.forenoon>div,
.afternoon>div {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.afternoon {
  margin-top: 10px;
}

.gray-bg {
  background-color: #eee;
}

.color1 {
  background-color: #0ff;
}

.color2 {
  background-color: #ff0;
}

.color3 {
  background-color: #f0f;
}

.color4 {
  background-color: #0f0;
}